<template>
    <div class="full-height">
        <page-header></page-header>
        <main class="clearfix main-container main-header">
            <user-info></user-info>
            <banner-box></banner-box>
        </main>
        <main :class="{'clearfix': true, 'main-container': true, 'main-box': true, 'complete': sidebarComplete }">
            <div class="sidebar-box">
                <sidebar :default-mode="sidebarComplete" @mode-changed="sidebarModeChanged"></sidebar>
            </div>
            <div class="content-box">
                <router-view></router-view>
            </div>
        </main>
        <page-footer></page-footer>
    </div>
</template>
<script>
import PageHeader from "./layout/header.vue";
import PageFooter from "./layout/footer.vue";
import UserInfo from "./layout/userInfo.vue";
import BannerBox from "./layout/bannerBox.vue";
import Sidebar from "./layout/sidebar.vue";

export default {
    components: { PageHeader, PageFooter, UserInfo, BannerBox, Sidebar },
    data() {
        return {
            sidebarComplete: true,
        }
    },
    methods: {
        sidebarModeChanged(mode) {
            this.sidebarComplete = mode;
        }
    }
}
</script>
<style>
.main-header {
    position: relative;
    padding-top: 70px;
}

.main-box {
    position: relative;
    margin-top: 10px!important;
    min-height: 774px;
}

.main-box.complete {
    .sidebar-box {
        width: 236px;
    }

    .content-box {
        margin-left: 270px;
    }
}


.sidebar-box {
    width: 70px;
    padding: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: $c_3;
}

.content-box {
    margin-left: 104px;
}
</style>